<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="addArtCateListFn">添加分类</el-button>
        </div>
      <el-table :data="list" style="width: 100%" border stripe>
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="cate_name" label="分类名称" ></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" size="mini"  @click="updateArtCate(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="delArtCateFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="提示" :visible.sync="Visible" width="30%" @close="dialogCloseFn">
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
        <el-form-item label="分类名称" prop="cate_name">
            <el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias" minlength="1" maxlength="10">
          <el-input v-model="addForm.cate_alias"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFn">取 消</el-button>
          <el-button type="primary" @click="configFn">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { getArtCateListAPI, addArtCateListAPI, updateArtCateListAPI, delArtCateListAPI } from '@/api'
// 如果用同一个按钮做状态区分
// 1、定义一个标记变量isEdit,还要定义本次编辑数据的唯一id值
// 2、在点击修改时，修改isEdit的值，保存要修改数据的id
// 3、点击新增时，修改isEdit的值,id置空
// 4、在点击保存时，用isEdit变量做区分
export default {
  data () {
    return {
      list: [],
      Visible: false,
      addForm: {
        cate_name: '',
        cate_alias: ''

      },
      addRules: {
        cate_name: [
          {
            required: true,
            message: '请输入文章分类名',
            trigger: 'blur'
          },
          {
            pattern: /^\S{1,10}$/,
            message: '文章分类名为1-10',
            trigger: 'blur'
          }
        ],
        cate_alias: [
          {
            required: true,
            message: '请输入文章分类别名',
            trigger: 'blur'
          },
          {
            pattern: /^\S{1,10}$/,
            message: '文章分类别名为1-10',
            trigger: 'blur'
          }
        ]
      },
      editId: '',
      isEdit: false// true 为编辑状态
    }
  },
  methods: {
    // 获取文章列表
    async getArtCateList () {
      const { data: res } = await getArtCateListAPI()
      if (res.code !== 0) {
        this.$message.error('文章获取失败')
      }
      // this.$message.success(res.message)
      this.list = res.data
      // console.log(res)
    },
    // 打开弹框
    addArtCateListFn () {
      this.isEdit = false
      this.editId = ''
      this.Visible = true
    },
    // 弹框确定按钮
    configFn () {
      this.$refs.addRef.validate(async valid => {
        if (valid) {
          if (this.isEdit) {
            // 修改
            // this.addForm.id = this.editId
            // updateArtCateListAPI({ id: this.editId, ...this.addForm })
            const { data: res } = await updateArtCateListAPI({ id: this.editId, ...this.addForm })
            if (res.code !== 0) {
              this.$message.error('更新失败')
            }
            this.$message.success(res.message)
          } else {
            // 新增
            const { data: res } = await addArtCateListAPI(this.addForm)
            if (res.code !== 0) {
              this.$message.error('添加失败')
            }
            this.$message.success(res.message)
          }
          this.getArtCateList()
          this.Visible = false
        } else {
          return false
        }
      })
    },
    // 弹框取消按钮
    cancelFn () {
      this.Visible = false
    },
    // 回调清空表单数据
    dialogCloseFn () {
      this.$refs.addRef.resetFields()
    },
    // 更新文章分类
    async updateArtCate (obj) {
      // console.log(obj)
      this.isEdit = true
      this.editId = obj.id
      this.Visible = true

      // 让el-dialog第一次挂载el-form时，先用addForm空字符串初始值绑定到内部，后续用resetFields重置
      // 所以让真实DOM先创建并在内部绑定好复制好初始值

      // 接着我们真实DOM更新后绑定好了,再给数据回显
      // 注意:我们给v-model对象赋值只是影响当前显示的值,不会影响到resetFields复制的初始值
      this.$nextTick(() => {
        // 数据回显
        this.addForm.cate_name = obj.cate_name
        this.addForm.cate_alias = obj.cate_alias
      })
    },
    // 删除文章
    async delArtCateFn (obj) {
      const { data: res } = await delArtCateListAPI(obj.id)
      console.log(res)
      if (res.code !== 0) {
        this.$message.error(res.message)
      }
      this.$message.success(res.message)
      this.getArtCateList()
    }
  },
  // 小bug：（el-form和el-dislog和数据回显不能同时使用）
  // 复现：第一次打开网页，先点击修改，再点击新增，发现输入框有值
  // 原因：点击修改后，关闭对话框的时候，置空失效了
  // 具体分析：resetFields有问题
  // 线索：Dialog的内容是懒渲染的，即在第一次被打开前，传入默认的slot不会被渲染到DOM上
  // 线索：vue数据改变（先执行同步所有）再去更新DOM（异步代码）

  // 无问题：第一次打开网页，先点击新增按钮->Dialog出现->el-form组件第一次挂载（关联的addForm对象的属性的值
  // 为空字符串）el-form组件内绑定了初始值，所以后续调用resetFields的时候，它可以用到空字符串初始值来重置

  // 有问题：第一次打开网页，先点击修改按钮-> 虽然Dialog变量为true了但是同步代码把addForm对象赋值了（默认值）->
  // DOm更新异步 -> dialog出现 -> el-form组件第一次挂载（使用addForm内置做回显然后第一次el-form内绑定了初始值（有值）
  // -> 以后做重置，它就用绑定的带值的做重置

  created () {
    this.getArtCateList()
  }
}
</script>

<style lang="less" scoped>
.header-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
